<template>
    <div class="search">
        <div class="search-obj">
            <div class="title">机构名称:</div> <el-input v-model="orgName" style="width: 500px" placeholder="机构名称"
                disabled />
        </div>
        <div class="search-obj">
            <div class="title"> 进件团队:</div> <el-select v-model="channel" placeholder="进件团队" style="width: 500px"
                clearable>
                <el-option v-for="item in channelList" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
        </div>
        <div class="search-obj">
            <div class="title">监控维度指标设定:</div>
            <el-select v-model="target" placeholder="监控维度指标" style="width: 500px" clearable>
                <el-option v-for="item in targetlList" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
        </div>
        <div class="search-obj">
            <div class="title">监控维度设定（当日）:</div>
           <el-select v-model="monitoringCycle" placeholder="监控维度设定（当日）" style="width: 500px" clearable multiple>
                <template #label="{ label }">
                    <span>{{ label }} </span>
                </template>
                <el-option v-for="item in monitoringCycleList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>

    </div>
    <div class="submit">
        <el-button color="rgba(200, 16, 46, 100)" @click="search">查询</el-button>
        <el-button color="rgb(220,220,220)" @click="clearable">重置</el-button>
    </div>
    <el-divider border-style="double" />
    <div class="image-describe">
        分析图象
    </div>
    <div class="table">
        <el-table :data="originData" style="width: 100%;" stripe >
            <el-table-column prop="age" label="年龄" width="180" align="center" />
            <el-table-column prop="monthAgoRatio" label="过去一个月进件分布比例" min-width="180" align="center" />
            <el-table-column prop="weekAgoRatio" label="过去一周进件分布比例" min-width="180" align="center" />
            <el-table-column prop="threeDayAgoRatio" label="过去3天进件分布比例" min-width="180" align="center" />
            <el-table-column prop="todayAgoRatio" label="今日进件分布比例" min-width="180" align="center" />
            <el-table-column  min-width="180" align="center" >
                <template #header>
                    <div style="color: red;">今日对比过去一个月</div>
                </template>
                <template #default="scope">
                    {{scope.row.compareMonthAgoRatio}}
                </template>
            </el-table-column>
            <el-table-column  min-width="180" align="center" >
                <template #header>
                    <div style="color: red;">今日对比过去一周</div>
                </template>
                <template #default="scope">
                    {{scope.row.compareWeekAgoRatio}}
                </template>
            </el-table-column>
            <el-table-column  min-width="180" align="center" >
                <template #header>
                    <div style="color: red;">今日对比过去3天</div>
                </template>
                <template #default="scope">
                    {{scope.row.comparethreeDayAgoRatio}}
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="result-describe">结果说明：</div>
</template>
<script setup>
import { ref } from 'vue'

let orgName = ref("江苏省工商银行")
let channel = ref("")
let channelList = ref([{ label: "江苏铭漫", value: 1 }])
let target = ref("")
let targetlList = ref([{ label: "性别", value: 1 },
{ label: "年龄", value: 2 },
{ label: "婚姻", value: 3 }, { label: "学历", value: 4 }, { label: "职业", value: 5 }])
let monitoringCycle = ref([])
let monitoringCycleList = ref([{ label: "当日", value: 1 },
{ label: "过去三天", value: 2 },
{ label: "过去一周", value: 3 },  { label: "过去一个月", value: 4 }])
const originData = ref([
        {
            age:"18-22",
            monthAgoRatio:"3.24%",
            weekAgoRatio:"5.35%",
            threeDayAgoRatio:"5.63%",
            todayAgoRatio:"14.90%",
            compareMonthAgoRatio:0.178,
            compareWeekAgoRatio:0.098,
            comparethreeDayAgoRatio:0.090
        },
        {
            age:"23-27",
            monthAgoRatio:"23.30%",
            weekAgoRatio:"23.40%",
            threeDayAgoRatio:"24.42%",
            todayAgoRatio:"12.34%",
            compareMonthAgoRatio:0.070,
            compareWeekAgoRatio:0.071,
            comparethreeDayAgoRatio:0.082
        },
        {
            age:"28-32",
            monthAgoRatio:"33.01%",
            weekAgoRatio:"28.24%",
            threeDayAgoRatio:"26.11%",
            todayAgoRatio:"19.07%",
            compareMonthAgoRatio:0.076,
            compareWeekAgoRatio:0.036,
            comparethreeDayAgoRatio:0.022
        },
        {
            age:"33-37",
            monthAgoRatio:"19.74%",
            weekAgoRatio:"20.47%",
            threeDayAgoRatio:"18.90%",
            todayAgoRatio:"29.93%",
            compareMonthAgoRatio:0.042,
            compareWeekAgoRatio:0.036,
            comparethreeDayAgoRatio:0.051
        },
        {
            age:"38-42",
            monthAgoRatio:"8.41%",
            weekAgoRatio:"10.36%",
            threeDayAgoRatio: "11.25%",
            todayAgoRatio:"10.97%",
            compareMonthAgoRatio:0.007,
            compareWeekAgoRatio:0.000,
            comparethreeDayAgoRatio:0.000
        },
        {
            age:"43-47",
            monthAgoRatio:"7.12%",
            weekAgoRatio:"6.82%",
            threeDayAgoRatio:"8.07%",
            todayAgoRatio:"7.07%",
            compareMonthAgoRatio:0.000,
            compareWeekAgoRatio:0.000,
            comparethreeDayAgoRatio:0.001
        },
        {
            age:"48-52",
            monthAgoRatio:"4.53%",
            weekAgoRatio:"3.37%",
            threeDayAgoRatio:"3.29%",
            todayAgoRatio:"3.67%",
            compareMonthAgoRatio:0.002,
            compareWeekAgoRatio:0.000,
            comparethreeDayAgoRatio:0.000
        },
        {
            age:"53-57",
            monthAgoRatio:"0.32%",
            weekAgoRatio:"1.21%",
            threeDayAgoRatio:"2.12%",
            todayAgoRatio:"1.41%",
            compareMonthAgoRatio:0.016,
            compareWeekAgoRatio:0.000,
            comparethreeDayAgoRatio:0.003
        },
        {
            age:"58-62",
            monthAgoRatio:"0.32%",
            weekAgoRatio:"0.78%",
            threeDayAgoRatio:"0.11%",
            todayAgoRatio:"0.60%",
            compareMonthAgoRatio:0.002,
            compareWeekAgoRatio:0.000,
            comparethreeDayAgoRatio:0.009
        },
        {
            age:"大于62",
            monthAgoRatio:"0.00%",
            weekAgoRatio:"0.00%",
            threeDayAgoRatio:"0.11%",
            todayAgoRatio:"0.03%",
            compareMonthAgoRatio:0.000,
            compareWeekAgoRatio:0.000,
            comparethreeDayAgoRatio:0.001
        },
        {
            age:"总计",
            monthAgoRatio:"100.00%",
            weekAgoRatio:"100.00%",
            threeDayAgoRatio:"100.00%",
            todayAgoRatio:"100.00%",
            compareMonthAgoRatio:0.393,
            compareWeekAgoRatio:0.242,
            comparethreeDayAgoRatio:0.260
        }
    
    ])

const clearable = () => {
    channel.value = ""
    target.value = ""
    monitoringCycle.value = ""
}
let data = ref([])
const search = () => {
    console.log(monitoringCycle.value)

console.log(data.value)
   
}
</script>
<style scoped lang="scss">
.search {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-left: 40px;
    width: 100%;


    .search-obj {
        margin-left: 80px;
        margin-top: 40px;
        width: 600px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-self: center;

        .title {
            width: 200px;
            align-content: center;
            text-align: end;
            margin-right: 10px;
        }
    }


}
.table {
    width: 95%;
    margin-left: 2%;
    margin-right: 1%;
}

.submit {
    position: absolute;
    right: 100px;
    margin-top: 20px;
    }

.el-divider {
    margin-top: 100px;
}
.image-describe{
    font-size: 30px;
    font-weight: 800;
    margin-top: 40px;
    margin-left: 40px;
    margin-bottom: 20px;
}
.result-describe{
    font-size: 20px;
    font-weight: 400;
    margin-top: 40px;
    margin-left: 40px;
}

</style>